import {DeleteOutlined, PlusOutlined} from '@ant-design/icons';
import {Button, Col, Row} from 'antd';
import React from 'react';
import styles from './index.less';
import {EditableField} from './EditableField';

interface EditableTwoColumnDisplayProps {
    leftTitle: string;
    rightTitle: string;
    data: Array<{ left: string | number; right: string | number }>;
    isEditing: boolean;
    onAdd?: () => void;
    onDelete?: (index: number) => void;
    onLeftChange?: (index: number, value: string) => void;
    onRightChange?: (index: number, value: string) => void;
}

export const EditableTwoColumnDisplay: React.FC<
    EditableTwoColumnDisplayProps
> = ({
         leftTitle,
         rightTitle,
         data,
         isEditing,
         onAdd,
         onDelete,
         onLeftChange,
         onRightChange,
     }) => (
    <div>
        <Row gutter={[8, 8]}>
            <Col span={10}>
                <div className={styles['section-label']}>{leftTitle}</div>
                {data.map((item, index) => (
                    <div
                        key={`left-${index}`}
                        style={{display: 'flex', alignItems: 'center'}}
                    >
                        <div style={{flex: 1, marginBottom: 4}}>
                            <EditableField
                                value={item.left}
                                isEditing={isEditing}
                                onChange={(value) => onLeftChange?.(index, value)}
                            />

                        </div>
                        {isEditing && (
                            <Button
                                type="text"
                                danger
                                size="small"
                                icon={<DeleteOutlined/>}
                                onClick={() => onDelete?.(index)}
                                style={{marginLeft: 4}}
                            />
                        )}
                    </div>
                ))}
            </Col>
            <Col span={10}>
                <div className={styles['section-label']}>{rightTitle}</div>
                {data.map((item, index) => (
                    <div key={`right-${index}`} style={{marginBottom: 4}}>
                        <EditableField
                            key={`right-${index}`}
                            value={item.right}
                            isEditing={isEditing}
                            onChange={(value) => onRightChange?.(index, value)}
                        />
                    </div>
                ))}
            </Col>
            {isEditing && (
                <Col span={4}>
                    <div className={styles['section-label']} style={{visibility: 'hidden'}}>
                        操作
                    </div>
                    <Button
                        type="dashed"
                        size="small"
                        icon={<PlusOutlined/>}
                        onClick={onAdd}
                        style={{marginBottom: 4}}
                    >
                        添加
                    </Button>
                </Col>
            )}
        </Row>
    </div>
);
